<!--
 * @Author: Betty
 * @Date: 2021-01-25 21:27:04
 * @LastEditors: Betty
 * @LastEditTime: 2021-02-21 20:54:53
 * @Description: 文章详情页面
-->
<template>
  <!-- 文章详情 -->
  <div>
    <!-- 使用模态框组件 -->
    <modal title="确认删除文章" :visible="modalIsVisible" v-if="isShowEdit"
     @modal-on-close="modalIsVisible = false"
     @modal-on-confirm="hideAndDelete">
      <p>确定要删除这篇文章吗？</p>
    </modal>
    <article class="container">
      <!-- 头图 -->
      <img class="img m-auto" :src="post && currentImage" v-if="post"/>
      <!-- 文章标题 -->
      <h1 class="title my-3">{{post && post.title}}</h1>
      <!-- 展示作者信息 -->
      <div class="d-flex align-items-center author-box">
        <div class="col-9">
          <user-profile :userInfo="post.author" v-if="post && typeof post.author == 'object'"></user-profile>
        </div>
        <!-- 发布文章的日期 -->
        <div class="col-3">
          <i class="date">发布时间：{{post && post.createdAt}}</i>
        </div>
      </div>
      <!-- 文章内容 -->
      <div class="content py-5 px-1" v-html="post && currentHTML"></div>
      <!-- 最后展示出编辑和删除按钮 -->
      <div v-if="isShowEdit" class="btn-group mt-5">
        <!-- 因为点击编辑按钮，要跳转到编辑页面，所以要做成router-link -->
        <router-link 
        type="button"
        :to="{name: 'create', query: {id: post._id}}" 
        class="btn btn-success"
        >编辑</router-link>
        <button type="button" class="btn btn-danger" @click.prevent="modalIsVisible = true">删除</button>
      </div>
    </article>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { GlobalDataProps, ImageProps, PostProps, UserProps, ResponseType } from '../store'
// 导入处理图片的函数
import { generateFitUrl } from '../helper'
// 导入用户信息组件
import UserProfile from '../components/UserProfile.vue'
// 导入markdown-it
import MarkdownIt from 'markdown-it'
// 导入模态框组件
import Modal from '../components/Modal.vue'
// 导入提示组件
import createMessage from '../components/createMessage'
export default defineComponent({
  name: '',
  components: {
    UserProfile,
    Modal
  },
  setup () {
    // 获取id，
    // 拿到路由数据
    const route = useRoute()
    const router = useRouter()
    // 得到文章id
    const pid = route.params.id
    // 准备好store对象
    const store = useStore<GlobalDataProps>()
    const md = new MarkdownIt()
    // 定义一个控制modal显示的变量
    const modalIsVisible = ref(false)
    // 调用根据id获取文章信息的接口
    onMounted(() => {
      // 调用action，来获取文章数据，获取成功以后，文章数据会放到store里，我们再去store里拿文章的数据
      store.dispatch('fetchPost', pid)
    })
    // 准备计算属性，来拿到store里的文章数据
    const post = computed<PostProps>(() => {
      const selectedPost = store.getters.getPostByPid(pid)
      console.log(1)
      console.log(selectedPost)
      return selectedPost
    })
    // 准备处理图片的计算属性
    const currentImage = computed(() => {
      if (post.value &&  post.value.image) {
        // 确定有文章以后，对图片进行处理
        generateFitUrl(post.value.image as ImageProps, 600, 400)
        const { fitUrl } = post.value.image as ImageProps
        console.log(fitUrl)
        return fitUrl
      }
      console.log(222)
      console.log(post.value.image)
    })
    // 准备处理文章内容的计算属性
    const currentHTML = computed(() => {
      // 假如isHTML不为true，说明是markdown语法，需要转换
      if (post.value && post.value.content) {
        console.log('文章内容准备转换')
        // 如果内容本身就是HTML了，那么不转换，直接返回内容，否则才转换
        if (!post.value.isHTML ) {
          // 使用markdownIt实例的render方法
          return md.render(post.value.content)
        }
        else {
          return post.value.content
        }
      }
      console.log('文章内容没有准备转换')
      console.log(post.value.content)// undefined,post.value里面没有content
    })
    // 准备一个变量来控制是否要显示编辑区域
    const isShowEdit = computed(() => {
      // 拿到我们的登录状态以及登录的用户id
      const { isLogin, _id } = store.state.user
      // 假如文章和作者都是存在的，并且已登录，那么就可以比较id了，id比对成功返回true，否则返回false
      if(post.value &&  post.value.author && isLogin) {
        const postAuthor = post.value.author as UserProps
        return _id === postAuthor._id
      } else {
        return  false
      }
    })
    // 删除文章的方法
    const hideAndDelete = () => {
      // 隐藏模态框
      modalIsVisible.value = false
      // 在这里唤醒删除文章的action
      store.dispatch('deletePost', pid).then((rawData: ResponseType<PostProps>) => {
        createMessage('删除成功，2秒后跳到专栏详情页', 'success')
        // 拿到删除的文章的专栏，跳转到该专栏
        const { data } = rawData
        setTimeout(() => {
          router.push(`/column/${data.column}`)
        }, 2000)
      })
    }
    return {
      post,
      currentImage,
      currentHTML,
      isShowEdit,
      modalIsVisible,
      hideAndDelete
    }
  }
})
</script>

<style>
  /* 作者和时间这一栏 */
  .author-box {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    background-color: #f6f6f6;
  }
  .img {
    display: block;
  }
  /* 文章的标题 */
  .title {
    text-align: center;
    line-height: 1.5;
  }
  /* 发布日期 */
  .date {
    font-size: 16px;
    line-height: 2;
  }
  /* 文章内容 */
</style>
